<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布采购</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/select2.css">
    <style>
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .select2-container .select2-selection--single{
            height: 38px;
            border-color: #D2D2D2!important;
            border-radius: 2px;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=1&y=1" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="input-title">
            <div class="mr-b"><span class="input-k">您选择的类目：</span><span
                    class="input-v">{{bread}}</span></div>
            <div><span class="input-k">信息类型：</span><span class="input-v">求购</span></div>
        </div>
        <div class="input-box1">
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">产品信息标题</span></div>
                <div class="right-v">
                    <input type="text" class="layui-input js-name" onkeyup='nameVal(this)'>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">产地</span></div>
                <div class="right-v">
                    <input type="text" class="layui-input js-productionPlace">
                    <span class=""></span>
                </div>
            </div>
        </div>
        <div class="input-box1">
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">产品图片</span></div>
                <div class="detail-pic-text"><span class="js-picStr">您可以根据不同的角度上传多张图片,建议您上传750*750像素以上的实拍大图</span><span style="top: 1px;" class="">不能为空！</span></div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                <div class="file-img">
                    <div class="box-file">
                        <img src="../img/file1.png" alt="" class="upload_btn">
                    </div>
                </div>
            </div>
            <div class="li clearfix mb-0">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">详细说明</span></div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                <div class="right-v wid-820">
                    <!--<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea js-content"></textarea>-->
                    <textarea id="demo" style="display: none;"></textarea>
                    <span class=""></span>
                </div>

            </div>

            <div class="text-c">
                <span class="release-btn1 js-submit">提交产品信息</span>
            </div>
        </div>
    </div>
</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>
<script>
    var edit = '';
    var layedit = '';

    if(getUrlParam('id')){  //编辑过来的
        get_ajax("/sys/storeCommodity/view", {id:getUrlParam('id')}, function (data) {
            console.log(data);
            $('#demo').val(data.content);    //1
            $('.js-name').val(data.name);    //1
            $('.js-productionPlace').val(data.productionPlace);  //1
            var picArr = data.picUrl.split(',');
            picArr.forEach(function(item){
                var el ='<div class="box-file" data-picUrl="'+item+'">'
                    +'<span class="del-png icon_close"></span>'
                    +'<img src="'+imgBaseUrl+item+'" alt="" class="upload_btn">'
                    +'</div>'
                $('.file-img').append(el);
            })
        })

    }

    var urlString = getUrlParam('bread').replace(/\s+/g,"");
    var postData = {
        name:'',
        productionPlace:'',
//        property:'',              request
//        originId:'',   //品牌id   request
        picUrl:'',
        content:'',
//        customType:'',
//        prickle:'',         request
//        priceForBoth:'',   request
        type:'1',
//        price:'',            request
//        originalPrice:'',    request
//        origin:'',            request
        commodityType:urlString.replace(/\>/g,","),
    }
    var app = new Vue({
        el: '#vue-box',
        data: {
            bread:getUrlParam('bread'),
            brandList:'',
        },
        mounted:function(){
            var that = this;
//            get_ajax("/sys/storeCommodityType/getListByPidIsNull", {}, function (data) {
//
//            })

        },
        updated:function () {

        },
        methods:{
        }
    });




    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file" data-picUrl="'+data.address+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })

    //    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })


    $(document).on('click','.js-submit',function(){//发布
        postData.name = $('.js-name').val();
        if(!postData.name){
            $('.js-name').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-name').removeClass('must-border').siblings('span').removeClass('must-val').html('');}










        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        postData.picUrl = pngStr.slice(0,pngStr.length-1);
        if(!postData.picUrl){
            $('.js-picStr').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-picStr').siblings('span').removeClass('must-val').html('');}


        postData.content = layedit.getContent(edit);
        if(!postData.content){
            $('#demo').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('#demo').siblings('span').removeClass('must-val').html('');}



        postData.productionPlace = $('.js-productionPlace').val();


        console.log(postData)

        if(getUrlParam('id')){
            postData.id = getUrlParam('id');
            get_ajax("/sys/storeCommodity/edit", postData, function (data) {
                console.log(data);
                layer.msg('编辑成功！');
            })
        }else{
            get_ajax("/sys/storeCommodity/add", postData, function (data) {
                console.log(data);
                layer.msg('发布成功！');
            })
        }

    })

    //keyup校验
    function nameVal(e){
        e.value?$('.js-name').removeClass('must-border').siblings('span').removeClass('must-val').html(''):$('.js-name').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！')
    }

    setTimeout(function(){
        layui.use('layedit', function(){
            layedit = layui.layedit;
            layedit.build('demo'); //建立编辑器
            layedit.set({
                uploadImage: {
                    url: baseUrl + '/file/layeditUplode?token=' + Token,
                    type: "post"
                }
            });
            edit = layedit.build('demo');
        });
    },200)
</script>
</body>
</html>